<template>
  <view class="fu-count-down">
    <text v-if="showDays">{{ timeData.days }}{{ dayText }}</text>
    <text v-if="showHours">{{ timeData.hours }}{{ hourText }}</text>
    <text v-if="showMinutes">{{ timeData.minutes }}{{ minuteText }}</text>
    <text>{{ timeData.seconds }}{{ secondText }}</text>
  </view>
</template>

<script>
/**
 * fu-count-down 倒计时组件
 * @description 用于实时展示倒计时数值
 * @property {Number} time - 倒计时时长，单位毫秒
 * @property {Boolean} autoStart - 是否自动开始倒计时
 * @property {Boolean} showDays - 是否显示天数
 * @property {Boolean} showHours - 是否显示小时
 * @property {Boolean} showMinutes - 是否显示分钟
 * @property {String} dayText - 天数文案
 * @property {String} hourText - 小时文案
 * @property {String} minuteText - 分钟文案
 * @property {String} secondText - 秒数文案
 * @event {Function} finish - 倒计时结束时触发
 */
export default {
  name: 'fu-count-down',
  props: {
    time: {
      type: Number,
      default: 0
    },
    autoStart: {
      type: Boolean,
      default: true
    },
    showDays: {
      type: Boolean,
      default: false
    },
    showHours: {
      type: Boolean,
      default: true
    },
    showMinutes: {
      type: Boolean,
      default: true
    },
    dayText: {
      type: String,
      default: '天'
    },
    hourText: {
      type: String,
      default: ':'
    },
    minuteText: {
      type: String,
      default: ':'
    },
    secondText: {
      type: String,
      default: ''
    }
  },
  emits: ['finish'],
  data() {
    return {
      timeData: {
        days: '0',
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      remainTime: 0,
      timer: null
    }
  },
  mounted() {
    if (this.autoStart) {
      this.start()
    }
  },
  beforeUnmount() {
    this.stop()
  },
  methods: {
    // 开始倒计时
    start() {
      if (this.timer) return
      
      this.remainTime = this.time
      this.countdown()
      
      this.timer = setInterval(() => {
        this.countdown()
      }, 1000)
    },
    
    // 停止倒计时
    stop() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    
    // 重置倒计时
    reset() {
      this.stop()
      this.remainTime = this.time
      this.updateTimeData()
    },
    
    // 倒计时计算
    countdown() {
      if (this.remainTime <= 0) {
        this.stop()
        this.$emit('finish')
        return
      }
      
      this.updateTimeData()
      this.remainTime -= 1000
    },
    
    // 更新时间数据
    updateTimeData() {
      const time = this.remainTime
      
      const days = Math.floor(time / (1000 * 60 * 60 * 24))
      const hours = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      const minutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60))
      const seconds = Math.floor((time % (1000 * 60)) / 1000)
      
      this.timeData = {
        days: days.toString(),
        hours: this.padZero(hours),
        minutes: this.padZero(minutes),
        seconds: this.padZero(seconds)
      }
    },
    
    // 补零
    padZero(num) {
      return String(num).padStart(2, '0')
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-count-down {
  display: inline-flex;
  align-items: center;
  color: var(--fu-text-color);
  font-size: 28rpx;
  line-height: 1.5;
}
</style> 